<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            条件循环:
                1.v-if:
                    写法:(1)v-if="表达式"
                        (2)v-else-if="表达式"
                        (3)v-else="表达式"
                    适用于：切换频率比较低的场景
                    特点：不展示的Dom元素直接删除
                    注意：三者一起使用时，必须连续
                2.v-show:
                    写法：v-show="表达式"
                    适用于：切换频率比较高的场景
                    特点：不展示的DOM元素使用display:none隐藏
                3.备注：
                使用v-if元素可能无法获取到，使用v-show可以
         -->
         <div id="root">
             <h2>当前n的值是:{{n}}</h2>
             <button @click="n++">点我n加1</button>
             <!-- v-if和template配合使用 -->
             <!-- <template v-if="n===6">
                <div>啦啦</div>
                <div>哈哈</div>
                <div>吼吼</div>
             </template> -->
             <!-- v-if做条件渲染
             <div v-if="n===1">Vue</div>
             <div v-else-if="n===2">Webpack</div>
             <div v-else>其他</div> -->
             <!-- v-show做条件渲染 -->
            <!-- <div v-show="n===1">vue</div>
            <div v-show="n===2">axios</div> -->
         </div>


    </body>
    <script>
        Vue.config.productionTip= false;
        const vm  = new Vue({
            el:"#root",
            data:{
                n:0,

            }
        })
    </script>
</html>